﻿<div class="row">
    <div class="col-md-12">
        <div ng-controller="ArtController">
            <h2>Artist Summary</h2>
            <table class="table table-bordered table-striped">
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th></th>
                </tr>
                <tr ng-repeat="artist in artists">
                    <td>{{artist.FirstName}}</td>
                    <td>{{artist.LastName}}</td>
                    <td><a href="#/Artist/{{artist.ArtistId}}" role="button" class="btn btn-primary">Details</a></td>
                 </tr>
                
                    
            </table>
            <div ng-show="showAddArtist()">
                <label for="fName">Artist First Name</label>
                <input type="text" ng-model="newArtist.FirstName" id="fName" placeholder="Enter New Artist First Name" /><br />
                <label for="lName">Last Name</label>
                <input type="text" ng-model="newArtist.LastName" id="lName" placeholder="Enter New Artist Last Name" /><br />
                <label for="bio">Artist Bio</label>
                <input type="text" ng-model="newArtist.Bio" placeholder="Enter New Artist Bio" id="bio" /><br />
                <label for="email">Artist Email</label>
                <input type="text" ng-model="newArtist.Email" placeholder="Enter New Artist Email" id="email" /><br />
                <label>Select Role</label>
                <select ng-model="newArtist.Role">
                    <option ng-repeat="role in roles" value="{{role}}">{{role}}</option>
                </select>
                <button ng-click="addArtist(newArtist);">Submit New Artist</button>
            </div>

        </div>
    </div>
</div>
